<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#64748B',
                        accent: '#10B981',
                        danger: '#EF4444',
                        dark: '#1D2129',
                        neutral: {
                            100: '#F8FAFC',
                            200: '#E2E8F0',
                            700: '#334155',
                            800: '#1E293B',
                            900: '#0F172A'
                        },
                        surface: {
                    50: '#f8fafc',
                    100: '#f1f5f9',
                    200: '#e2e8f0',
                },
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'elegant': '0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02)',
                        'card': '0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.01)',
                        'soft': '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02)',
                    }
                },
            }
        }
    </script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
    <title>用户登录</title>
    <style>
        /* 移除重复的body定义，只保留一个 */
        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background-image: url('/images/background.jpg');
        }

        .layout-container {
            display: flex;
            width: 100%;
            flex: 1;
        }

        /* 左侧图片区域 */
        .image-section {
            flex: 1;
            background: url('https://example.com/login-bg.jpg') no-repeat center center;
            background-size: cover;
            position: relative;
            display: none; /* 默认隐藏移动端 */
        }

        /* 右侧表单区域 */
        .form-section {
            flex: 1;
            min-width: 320px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }

        .form-container {
        width: 100%;
        max-width: 400px;
        background: linear-gradient(135deg, #92b1d3 0%, #f3f4f6 100%);
        border: 1px solid rgba(229, 231, 235, 0.8);
        padding: 2.5rem;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }

        /* 原有表单样式优化 */
        .form-container h2 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 2rem;
            font-size: 1.8rem;
        }

        .form-container label {
            display: block;
            margin: 1rem 0 0.5rem;
            color: #34495e;
            font-weight: 500;
        }

        .form-container input {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #bdc3c7;
            border-radius: 6px;
            margin-bottom: 1rem;
            font-size: 1rem;
        }

        .form-container input:focus {
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
            outline: none;
        }

        .form-container button {
            width: 100%;
            padding: 1rem;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            cursor: pointer;
            margin-top: 1.5rem;
            transition: background 0.3s;
        }

        .form-container button:hover {
            background: #2980b9;
        }

        .form-container a {
            display: block;
            text-align: center;
            margin-top: 1.5rem;
            color: #3498db;
            text-decoration: none;
            font-size: 0.9rem;
        }

        /* 响应式布局 */
        @media (min-width: 768px) {
            .image-section {
                display: block; /* 桌面端显示图片区域 */
            }

            .form-section {
                flex: 0 0 50%;
            }
        }

        /* 移动端优化 */
        @media (max-width: 480px) {
            .form-container {
                padding: 1.5rem;
            }

            .form-container h2 {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body class="bg-neutral font-inter text-dark">
    <header class="bg-primary text-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa-solid fa-book-open text-white text-2xl"></i>
                <h1 class="text-xl font-bold text-white">软课程管理平台</h1>
            </div>
            <div class="flex items-center space-x-3">
                <div id="username-display" class="font-medium text-white"></div>
                <a href="#" class="text-white hover:text-neutral-200 transition-colors duration-300">
                    <i class="fa-solid fa-user-circle text-xl"></i>
                </a>
            </div>
        </div>
    </header>
    
    <div class="layout-container">
        <!-- 左侧图片区域 -->
<div class="image-section relative flex items-center justify-center bg-cover bg-center" 
style="background-image: url('https://example.com/your-background-image.jpg')">
<!-- 半透明黑色遮罩层（可调整透明度） -->
<div class="absolute inset-0 bg-black/40"></div>

<div class="relative z-10 px-12 text-white max-w-lg">
   <h2 class="text-4xl font-bold mb-6">开启您的学习之旅</h2>
   <p class="text-xl mb-8 text-gray-100">软课程管理平台，一款功能强大的学习工具，带你探索知识的无限可能</p>
   
   <div class="space-y-5">
       <!-- 项目1 -->
       <div class="flex items-start">
           <div class="bg-blue-500/90 p-2 rounded-lg mr-4">
               <i class="fas fa-book-open text-white"></i>
           </div>
           <div>
               <h3 class="font-semibold text-lg">课程管理</h3>
               <p class="text-gray-200">涵盖助教管理、资源、章节、选课等核心功能</p>
           </div>
       </div>
       
       <!-- 项目2 -->
       <div class="flex items-start">
           <div class="bg-green-500/90 p-2 rounded-lg mr-4">
               <i class="fas fa-chalkboard-teacher text-white"></i>
           </div>
           <div>
               <h3 class="font-semibold text-lg">在线练习系统</h3>
               <p class="text-gray-200">支持发布练习，做练习，收藏题目，错题重做，查看班级排名，导出练习报告等实用功能</p>
           </div>
       </div>
       
       <!-- 项目3 -->
       <div class="flex items-start">
           <div class="bg-purple-500/90 p-2 rounded-lg mr-4">
               <i class="fas fa-certificate text-white"></i>
           </div>
           <div>
               <h3 class="font-semibold text-lg">学习轨迹功能</h3>
               <p class="text-gray-200">学生的每个学习动作都会被平台记录，学生可以随时掌握学习进度</p>
           </div>
       </div>
   </div>
</div>
</div>
        <!-- 表单区域 -->
        <div class="form-container bg-white rounded-xl shadow-md p-8 max-w-md w-full">
            <!-- 图标标题 -->
            <div class="text-center mb-8">
                <div class="mx-auto w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mb-4">
                    <i class="fas fa-user-lock text-blue-500 text-2xl"></i>
                </div>
                <h2 class="text-2xl font-bold text-gray-800">欢迎回来</h2>
                <p class="text-gray-500 mt-1">请输入您的登录信息</p>
            </div>
            
            <!-- 输入框组 -->
            <div class="space-y-4">
                <div>
                    <label for="loginUsername" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                    <div class="relative">
                        <input 
                            type="text" 
                            id="loginUsername"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-200 focus:border-blue-500"
                            placeholder="输入用户名"
                            required
                        >
                    </div>
                </div>
                
                <div>
                    <label for="loginPassword" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                    <div class="relative">
                        <input 
                            type="password" 
                            id="loginPassword"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-200 focus:border-blue-500"
                            placeholder="输入密码"
                            required
                        >
                    </div>
                </div>
            </div>
            
            <!-- 登录按钮 -->
            <button 
                class="w-full mt-6 py-3 px-4 bg-gradient-to-r from-blue-500 to-blue-600 text-white font-medium rounded-lg hover:shadow-md transition-all"
                onclick="login()"
            >
                登录
            </button>
            
            <!-- 注册链接 -->
            <div class="mt-6 text-center text-sm text-gray-500">
                没有账号？<a href="register.html" class="text-blue-600 font-medium hover:underline">立即注册</a>
            </div>
        </div>
    </div>
    
    <footer class="bg-dark text-white py-8">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <h3 class="text-lg font-semibold mb-4">用户登录</h3>
                    <p class="text-gray-400">您将在该页面完成登录操作。</p>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">联系我们</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><i class="fa-solid fa-envelope mr-2"></i> softclass-platform@qq.com</li>
                        <li><i class="fa-solid fa-phone mr-2"></i> 114-514-1919-810</li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">关注我们</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa-brands fa-weixin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa-brands fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa-brands fa-github text-xl"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>© 2025 软课程管理平台 版权所有</p>
            </div>
        </div>
    </footer>
    
    <script src="js/login.js"></script>
</body>
</html>